import React, { Component,createRef } from 'react';
//
import Model from '@/models/role'
import { Table,Button,Modal,message} from 'antd';
import ADDROLE from './AddRole'
import Auth from './Auth'
import moment from "moment"
const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      align:"center",
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      align:"center",
      render:(data)=>{
        
        return  moment(parseInt(data)).format('YYYY-MM-DD hh:mm:ss');
      }
    },
    {
      title: '授权时间',
      dataIndex: 'auth_time',
      key: 'auth_time',
      align:"center",
      render:(data)=>{
        // console.log(data);
        return data?moment(parseInt(data)).format('YYYY-MM-DD hh:mm:ss'):"暂没授权";
      }
    },
    {
      title: '授权人',
      key: 'auth_name',
      dataIndex: 'auth_name',
      align:"center"
    }
  ];
class Role extends Component {
  constructor(props){
    super(props)
    this.AuthForm = createRef()
  }
    state = {
       roleInfo:[],
       current_page:1,
       visible: false,
       confirmLoading: false,
       submitadd:false,
       role: {}, // 选中的role
       isShowAuth: false, // 是否显示设置权限界面
    }
    render() {
      let {current_page,visible,confirmLoading,submitadd,isShowAuth,role} = this.state
      const rowSelection = {
        type:'radio',
        onChange: (selectedRowKeys, selectedRows) => {
          this.setState({role:selectedRows[0]})
        },
        selectedRowKeys:[role._id],
        onSelect:(record)=>{
            // console.log(record);
            this.setState({role:record})
        }
    }
        return (
            <div>
                <div>
                <Button type="primary" onClick={this.showModal} style={{marginRight:"20px"}}>创建角色</Button>
                <Button type='primary' disabled={!role._id} onClick={() => this.setState({isShowAuth: true})}>设置角色权限</Button>

                </div><hr />
               <Table columns={columns} dataSource={this.state.roleInfo} rowSelection={rowSelection}
                pagination={{ defaultPageSize: 7, onChange: this.getPage, current: current_page }}
                rowKey={record => record._id}
                onRow={record =>({ onClick:()=>{this.setState({role:record})}})}
               />
               <Modal
                    title="创建角色"
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                >
                  <ADDROLE submitadd={submitadd}/>
                </Modal>
                <Modal title="设置角色权限" visible={isShowAuth} onOk={this.updateRole}  onCancel={()=>{this.setState({isShowAuth:false})}} okText="确认"  cancelText="取消">
                <Auth ref={this.AuthForm} role={role}/>
              </Modal>
            </div>
        );
    }
    componentDidMount(){
      //请求数据
      this.InitRolelist(this.state.current_page)
    }
    InitRolelist(page){

      Model.roleList().then(ret=>{
        // console.log(ret);
        if(ret.status===0)
        {
          localStorage.setItem("rolelength",ret.data.length)
          this.setState({
            roleInfo:ret.data,
            current_page:page
          })
        }
    })
    }
    //获取当前页数
    getPage=(page)=>{
        this.setState({
          current_page:page
        })
    }
    //
    showModal = () => {
      this.setState(() => {
          return {
              visible: true,
          }
      })
  };

  handleOk = () => {

      this.setState({
          confirmLoading: true,
          submitadd: true,
      })
      setTimeout(() => {
          this.setState({
              confirmLoading: false,
              visible: false,
              submitadd: false,
          }, () => {
              this.InitRolelist(this.state.current_page)
          })
      }, 2000);
  };
  handleCancel = () => {
      this.setState({
          visible: false
      })
  };
  updateRole=()=>{
      // 隐藏确认框
      this.setState({
        isShowAuth: false
    })
    const role = this.state.role
    // 把父组件的role某个值设置为子组件的某个值
    role.menus = this.AuthForm.current.state.checkedKeys
    role.auth_time = Date.now()
    if(localStorage.getItem("loginname")){
    role.auth_name = localStorage.getItem('loginname')
    }
    else
    role.auth_name = 'admin'
    Model.authRole(role).then(ret=>{
      if(ret.status === 0 ){
              message.success('权限设置成功')
          }else{
              message.error('权限设置失败')
          }
    })
    
  }
}

export default Role;
